<template>
  <div>
    <!-- <h1>hello vue</h1> -->
    <!-- 情况一：数组翻转 -->
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
    <button @click="reverseFn">数组翻转</button>
    <!-- 
      情况二：截取数组
     -->
     <ul>
       <li v-for="(item,index) in arr" :key="index">{{item}}</li>
     </ul>
     <button @click="sliceFn">截取数组</button>
     <!-- 
      总结
      数组方法会改变原始数组，那么就会触发v-for更新，视图也就会自动更新
      -->

      <!-- 
        情况三：通过数组的下标值来修改数组元素的值
        修改后观察，v-for会不会更新-视图会不会更新

        总结：数组变化了，但不会触发v-for更新
        因为：这个和vue实现原理相关，因为vue监听不到通过下标值来修改数组元素的，因此就不会触发v-for
        
        问题：有时候就是需要通过下标值来修改内容的，那如何解决这个问题呢 ？
        答：vue专门提供了一个方法来解决这个问题，这个方法就是this.$set()
        语法：this.$set(目标结构, 下标值, 新的值)
       -->
      <button @click="changeFn">修改下标值为1的元素内容</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: ["小明","小芳","小红"]
    }
  },
  methods: {
    /**
    总结：reverse方法会导致v-for更新 --- 视图也就更新了
    因为：reverse方法改变原始数组
    */  

    reverseFn(){
      this.arr.reverse();
    },
    /**
    截取数组前2位
    总结：slice不烦导致v-for更新
    因为：slice方法不会改变原始数组
    */ 
    sliceFn(){
      this.arr = this.arr.slice(0,2)
    },
    changeFn(){
      // this.arr[1] = "芳芳";
      // console.log(this.arr);
      this.$set(this.arr, 1, "芳芳")
    }
  }
}
</script>

<style>

</style>